// React + TS

import { useEffect, useRef } from "react"

function App() {
	// useRef与TS-获取dom
	// 获取dom的场景，可以直接把要获取的dom元素的类型方程泛型传递给useRef，可以推导出.current属性的类型
	const domRef = useRef<HTMLInputElement>(null)

	useEffect(() => {
		// 这里使用?.是可选连，代表domRef.current不为空值（即不为null和undifined）时，才会执行点运算（后面的代码），这种叫“类型守卫”，防止出现空值点的运算错误
		domRef.current?.focus()
	}, [])

	// useRef与TS-引用稳定的存储器
	// 把useRef当成引用稳定的存储器使用的场景可以通过泛型传入联合类型来做，如定时器的场景
	const timerRef = useRef<number | undefined>(undefined)

	useEffect(() => {
		timerRef.current = setInterval(() => {
			console.log("123")
		}, 1000)

		return () => clearInterval(timerRef.current)
	}, [])

	return (
		<>
			<input ref={domRef} />
		</>
	)
}

export default App
